<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
  name: 'PieChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '200px',
    },
    chartData: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      chart: null,
      title: [],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  computed: {
    // eslint-disable-next-line
    totalCount: function () {
      const count = 10
      /* if (this.chartData.length) {
        count = this._.sumBy(this.chartData, o => {
          return o.value
        })
      } */
      return count
    },
  },
  watch: {
    chartData: {
      handler(newVal, oldVal) {
        this.title = newVal.map(item => item.name)
        this.initChart()
      },
      deep: true,
      immediate: false,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el, 'macarons')
      }
      const sum = this.chartData.map(e => parseInt(e.value)).reduce((a, b) => a + b)
      this.chart.setOption({
        /*  title: {
          text: this.totalCount,
          subtext: '总量',
          x: 'center',
          y: '36%',
          textStyle: {
            fontWeight: 'bolder',
            fontSize: 26,
            color: '#333',
          }, // 标题
          subtextStyle: {
            fontWeight: 'bolder',
            fontSize: 14,
            color: '#333',
          }, // 副标题
        }, */
        title: {
          text: '政策惠及企业分规模类型统计',
          x: 'center',
          textStyle: {
            fontFamily: 'syht-Bold',
            fontSize: 16,
            fontWeight: 700,
            color: '#333',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          backgroundColor: 'rgba(255,255,255,0.9)',
          textStyle: {
            fontFamily: 'syht-Regular',
            fontSize: 14,
            fontWeight: 400,
            color: '#333',
          },
        },
        legend: {
          // type: 'scroll',
          orient: 'vertical',
          right: '10%',
          top: '35%',
          bottom: 20,
          textStyle: {
            fontFamily: 'syht-Regular',
            fontSize: 12,
            fontWeight: 400,
            color: '#333',
          },
        },
        series: [
          {
            name: '政策惠及企业分规模类型统计',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: function (params) {
                return '{value|' + sum + '}\n{des|累计}'
              },
              rich: {
                value: {
                  fontSize: 18,
                  fontFamily: 'syht-Bold',
                  fontWeight: '700',
                  lineHeight: 25,
                  color: '#333',
                },
                des: {
                  fontFamily: 'syht-Regular',
                  color: '#333',
                  fontSize: 10,
                },
              },

              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: this.chartData,
          },
        ],
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
